// CreateSpaceDialog.vue
<template>
    <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑空间' : '创建空间'" width="600px" :close-on-click-modal="false">
        <el-form :model="spaceForm" :rules="rules" ref="formRef" label-width="100px">
            <el-form-item label="空间名称" prop="name">
                <el-input v-model="spaceForm.name" placeholder="请输入空间名称" />
            </el-form-item>

            <el-form-item label="空间类型" prop="type">
                <el-select v-model="spaceForm.type" placeholder="请选择空间类型">
                    <el-option label="教室" value="classroom" />
                    <el-option label="办公室" value="office" />
                    <el-option label="会议室" value="meeting" />
                    <el-option label="实验室" value="lab" />
                </el-select>
            </el-form-item>

            <el-form-item label="所在区域" prop="area">
                <el-cascader v-model="spaceForm.area" :options="areaOptions" :props="{ checkStrictly: true }"
                    placeholder="请选择区域" />
            </el-form-item>

            <el-form-item label="包含设备">
                <div class="devices-section">
                    <div class="device-type">
                        <div class="type-title">照明设备：</div>
                        <div class="device-list">
                            <el-checkbox-group v-model="spaceForm.lightDevices">
                                <el-checkbox label="main_light">主灯</el-checkbox>
                                <el-checkbox label="aux_light">辅灯</el-checkbox>
                                <el-checkbox label="blackboard_light">黑板灯</el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </div>

                    <div class="device-type">
                        <div class="type-title">空调设备：</div>
                        <div class="device-list">
                            <el-checkbox-group v-model="spaceForm.acDevices">
                                <el-checkbox label="front_ac">前排空调</el-checkbox>
                                <el-checkbox label="back_ac">后排空调</el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </div>

                    <div class="device-type">
                        <div class="type-title">其他设备：</div>
                        <div class="device-list">
                            <el-checkbox-group v-model="spaceForm.otherDevices">
                                <el-checkbox label="projector">投影仪</el-checkbox>
                                <el-checkbox label="screen">幕布</el-checkbox>
                                <el-checkbox label="sensor">传感器</el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </div>
                </div>
            </el-form-item>
        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleCancel">取消</el-button>
                <el-button type="primary" @click="handleConfirm">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    },
    isEdit: {
        type: Boolean,
        default: false
    },
    spaceData: {
        type: Object,
        default: () => ({})
    }
})

const emit = defineEmits(['update:visible', 'confirm', 'cancel'])

const formRef = ref(null)
const dialogVisible = ref(props.visible)

// 表单数据
const spaceForm = ref({
    name: '',
    type: '',
    area: [],
    lightDevices: [],
    acDevices: [],
    otherDevices: []
})

// 表单验证规则
const rules = {
    name: [{ required: true, message: '请输入空间名称', trigger: 'blur' }],
    type: [{ required: true, message: '请选择空间类型', trigger: 'change' }],
    area: [{ required: true, message: '请选择区域', trigger: 'change' }]
}

// 区域选项
const areaOptions = [
    {
        value: 'building1',
        label: '教学楼',
        children: [
            {
                value: 'floor1',
                label: '1层'
            },
            {
                value: 'floor2',
                label: '2层'
            },
            {
                value: 'floor3',
                label: '3层'
            }
        ]
    },
    {
        value: 'building2',
        label: '实验楼',
        children: [
            {
                value: 'floor1',
                label: '1层'
            },
            {
                value: 'floor2',
                label: '2层'
            }
        ]
    }
]

// 处理取消
const handleCancel = () => {
    emit('update:visible', false)
    emit('cancel')
}

// 处理确认
const handleConfirm = async () => {
    if (!formRef.value) return

    await formRef.value.validate((valid, fields) => {
        if (valid) {
            const spaceData = {
                ...spaceForm.value,
                id: props.isEdit ? props.spaceData.id : Date.now().toString(),
                devices: [
                    ...spaceForm.value.lightDevices.map(device => ({ id: device, type: 'light' })),
                    ...spaceForm.value.acDevices.map(device => ({ id: device, type: 'ac' })),
                    ...spaceForm.value.otherDevices.map(device => ({ id: device, type: 'other' }))
                ]
            }
            emit('confirm', spaceData)
            emit('update:visible', false)
        }
    })
}

// 监听visible变化
watch(
    () => props.visible,
    (newVal) => {
        dialogVisible.value = newVal
        if (newVal && props.isEdit && props.spaceData) {
            // 编辑模式下填充表单数据
            const { name, type, area, devices = [] } = props.spaceData
            spaceForm.value = {
                name,
                type,
                area,
                lightDevices: devices.filter(d => d.type === 'light').map(d => d.id),
                acDevices: devices.filter(d => d.type === 'ac').map(d => d.id),
                otherDevices: devices.filter(d => d.type === 'other').map(d => d.id)
            }
        } else {
            // 创建模式下重置表单
            spaceForm.value = {
                name: '',
                type: '',
                area: [],
                lightDevices: [],
                acDevices: [],
                otherDevices: []
            }
        }
    }
)

// 监听dialogVisible变化
watch(dialogVisible, (newVal) => {
    emit('update:visible', newVal)
})
</script>

<style lang="scss" scoped>
.devices-section {
    display: flex;
    flex-direction: column;
    gap: 16px;

    .device-type {
        display: flex;
        align-items: flex-start;
        gap: 8px;

        .type-title {
            width: 100px;
            color: var(--color-text-regular);
            line-height: 32px;
        }

        .device-list {
            flex: 1;

            :deep(.el-checkbox-group) {
                display: flex;
                flex-wrap: wrap;
                gap: 16px;
            }
        }
    }
}

:deep(.el-cascader) {
    width: 100%;
}

:deep(.el-select) {
    width: 100%;
}
</style>